<template>
    <div class="sidebar" :class="{'sidebar-collapse':collapse}">
      <div class="title">
        广西110微信报警平台
      </div>
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#eef1f6"
        text-color="#48576a" 
        active-text-color="#409eff"
        unique-opened
        router
        :default-active="onRoutes" 
        :collapse='collapse'
      >
      <!-- default-active将导航的激活状态和路由管理 -->
        <template v-for="item in items">
            <template v-if="item.subs">
                  <el-submenu :index="item.index" :key="item.index">
                      <template slot="title">
                          <i :class="item.icon"></i>
                          <span>{{item.title}}</span>
                      </template>
                      <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
                              <i :class="subItem.icon"></i>
                              {{ subItem.title }}
                      </el-menu-item>
                  </el-submenu>
            </template>
            <template v-else>
                  <el-menu-item :index="item.index" :key="item.index">
                      <i :class="item.icon"></i>
                      <span slot="title">{{ item.title }}</span>
                  </el-menu-item>
            </template>
        </template>
      </el-menu>

    </div>
</template>

<script>
export default {
  name: "HomeSidebar",
  data() {
    return {
      items: [
        // {
        //   index: "1",
        //   icon:"el-icon-circle-check-outline",
        //   title: "实名验证审核",
        //   subs: [
        //     {
        //       icon: "el-icon-document",
        //       index: "/home/index",
        //       title: "系统首页"
        //     }
        //   ]
        // },
        // {
        //   index: "2",
        //   icon: "el-icon-phone-outline",
        //   title: "报警举报管理",
        //   subs: []
        // },
        {
          index: "3",
          icon:"el-icon-menu",
          title: "警务信息管理",
          subs: [
            {
              icon: "el-icon-document",
              index: "/home/leavemsg",
              title: "留言管理"
            },
            {
              icon: "el-icon-document",
              index: "/home/warnmsg",
              title: "警务信息管理"
            }
          ]
        },
        {
          index: "4",
          icon:"el-icon-date",
          title: "警务数据分析",
          subs: [
            {
              icon: "el-icon-document",
              index: "/home/warnanalysis",
              title: "警务数据分析"
            }
          ]
        },
        // {
        //   index: "5",
        //   icon:"el-icon-edit-outline",
        //   title: "基础信息设置",
        //   subs: []
        // },
        {
          index: "6",
          icon:"el-icon-setting",
          title: "系统设置",
          subs: [
            {
              icon: "el-icon-document",
              index: "/home/power",
              title: "权限管理"
            }
          ]
        }
      ]
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path;
    },
    collapse() {
      return this.$store.state.collapse;
    }
  }
};
</script>

<style scoped>
.sidebar {
  position: absolute;
  left: 0;
  bottom: 30px;
  top: 0;
}
.sidebar .title {
  width: 250px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #20a0ff;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  border-right: 1px solid #ccc;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sidebar-collapse .title {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sidebar-collapse .title {
  width: 65px;
  height: 80px;
  color: #20a0ff;
}
.el-menu-vertical-demo {
  position: absolute;
  top: 80px;
  bottom: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
}
</style>